<template>
    <div class="service">

        <div class="banner">
            <img class="bj" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/service_index_banner_bj.png"
                alt="企服">
            <div class="banner-title">小竹企业服务</div>
            <div class="banner-tabs">
                <div class="tab" :class="{ 'active': tabsActive == 0 }" @click="tabsActive = 0">
                    找需求
                </div>
                <div class="tab" :class="{ 'active': tabsActive == 1 }" @click="tabsActive = 1">
                    找商家
                </div>
                <div class="tab" :class="{ 'active': tabsActive == 2 }" @click="tabsActive = 2">
                    找服务
                </div>
                <div class="tips" @click="set_payVipShow({ show: true, index: 1 })">
                    <img src="~/assets/images/service/index/service_vip_icon.png" alt="">
                    开通会员享受无限次解锁次数
                </div>
            </div>
            <div class="search">
                <div class="search-1">
                    <el-input :placeholder="tabsActiveInputText" v-model="keyword" class="search-1-input">
                    </el-input>
                    <el-button class="search-1-right" type="primary" round @click="goSearch()">搜索</el-button>
                </div>
                <el-button class="fbxq-button" @click="goPostDemand()">发布需求</el-button>
            </div>
            <div class="everyone-search">
                <span class="djdzs">大家在搜</span>
                <img src="~/assets/images/service/yb-img/categoryFire.png" alt="" />
                <span class="many-tag" v-for="item in serviceHotSearch" :key="item" @click="goSearch2(item)">{{ item
                    }}</span>
            </div>
        </div>

        <!-- 平台保障安全放心 -->
        <div class="ptbz">
            <div class="ptbz-icon" @click="go('/service/demandlist')">
                <img src="~/assets/images/service/index/caidan1.png" alt="" />
                <div class="ptbz-text">
                    需求大厅
                </div>
            </div>
            <div class="line"></div>
            <div class="ptbz-icon" @click="go('/service/servicelist')">
                <img src="~/assets/images/service/index/caidan2.png" alt="" />
                <div class="ptbz-text">
                    找服务商
                </div>
            </div>
            <div class="line"></div>
            <div v-if="userInfo && userInfo.service_info" class="ptbz-icon" @click="go('/service/servicecenter/index')">
                <img src="~/assets/images/service/index/caidan3.png" alt="" />
                <div class="ptbz-text">
                    管理店铺
                </div>
            </div>
            <div v-else class="ptbz-icon" @click="go('/service/applyservice')">
                <img src="~/assets/images/service/index/caidan3.png" alt="" />
                <div class="ptbz-text">
                    入驻服务商
                </div>
            </div>
            <div class="line"></div>
            <div class="ptbz-icon" @click="go('/user/myserviceorder')">
                <img src="~/assets/images/service/index/caidan4.png" alt="" />
                <div class="ptbz-text">
                    企服中心
                </div>
            </div>
        </div>
        <!-- 平台保障安全放心 end -->

        <div class="service_index_ad_img">
            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/service_index_ad_img.png" alt="入驻服务商">
            <div class="breathing-button" @click="go('/service/applyservice')">
                免费入驻
            </div>
        </div>


        <!-- 热门需求 -->
        <div class="page-title">
            <img src="~/assets/images/service/yb-img/categoryFire.png" alt="" />
            <div class="title-text">热门需求</div>
            <div class="more" @click="go('/service/demandlist')">
                查看更多&nbsp;>
            </div>
        </div>

        <div class="hot-demand-list flex-center-1">
            <div v-for="(item, index) in recommend" :key="index" class="hot-demand-item"
                @click="go('/service/demanddetail?id=' + item.id)">
                <div class="title-money flex-sb">
                    <div class="title fz-16">
                        <div class="ellipsis">
                            {{ item.name }}
                        </div>
                        <span class="fz-12">{{ item.one_cate_name }}·{{
                            item.second_cate_name
                            }}</span>
                    </div>
                    <div class="money fz-20">
                        {{
                            "￥" + item.money
                        }}
                    </div>
                </div>
                <div class="hot-demand-item-info fz-13 multi-line-ellipsis-2">
                    {{ item.describe }}
                </div>
                <div class="hot-demand-item-open flex-sb">
                    <div class="fz-14 left">
                        项目参与：{{ item.join_number }}人投标
                    </div>
                    <div class="flex-center-1 fz-13 buttons" @click.stop="go('/service/demanddetail?id=' + item.id)">
                        参与需求
                    </div>
                </div>
            </div>

            <el-skeleton style="width: 100%;" :loading="dataLoading" animated :count="2">
                <div style="display: flex;" slot="template">
                    <el-skeleton-item variant="caption" style="width: 391px; height: 222px;margin: 0 7px 14px;" />
                    <el-skeleton-item variant="caption" style="width: 391px; height: 222px;margin: 0 7px 14px;" />
                    <el-skeleton-item variant="caption" style="width: 391px; height: 222px;margin: 0 7px 14px;" />
                </div>
            </el-skeleton>
        </div>
        <!-- 热门需求 end -->



        <!-- 热门需求 -->
        <div class="page-title">
            <img src="~/assets/images/service/index/index_title_icon1.png" alt="" />
            <div class="title-text">优质服务商</div>
        </div>

        <div class="recommend flex-sb">
            <div class="big-recommend">
                <img src="~/assets/images/service/index/yxdpp_icon.png" class="big-recommend-img" alt="" />
                <div class="big-recommend-title">优选大品牌</div>
                <div class="service-list">
                    <el-carousel height="440px" indicator-position="outside" arrow="never" loop>
                        <el-carousel-item v-for="(item, index) in preferred" :key="index">
                            <div v-for="(a, b) in item" :key="b" class="service-item" @click="
                                go(
                                    '/service/servicedetail?id=' +
                                    a.id
                                )
                                ">
                                <div class="service-item-info flex">
                                    <img :src="a.logo" alt="" style="object-fit: cover" />
                                    <div class="fz16">
                                        <div class="text-ellipsis" style="width: 166px">
                                            {{ a.name }}
                                        </div>
                                        <img :src="getServiceType(a.type)
                                            " class="service-type" alt="" />
                                    </div>
                                </div>
                                <div class="service-item-business">
                                    主营：
                                    <span v-for="(item, index) in a.second_cate_name" :key="index">
                                        {{ item }}
                                    </span>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="hot-recommend">
                <div class="title flex-sb">
                    <span class="fz-18 flex-center-1">
                        <img src="~/assets/images/service/yb-img/service-icon.png" alt="" />
                        热门服务商
                    </span>
                    <div class="fz-18" @click="go('/service/servicelist')" style="cursor: pointer">
                        查看更多&nbsp;>
                    </div>
                </div>
                <div class="hot-service-list">
                    <div v-for="(item, index) in serviceHot" :key="index" class="hot-service-item" @click="
                        go('/service/servicedetail?id=' + item.id)
                        ">
                        <div class="service-item-info flex">
                            <img :src="item.logo" alt="" style="object-fit: cover" />
                            <div class="fz16">
                                <div class="text-ellipsis" style="width: 166px">
                                    {{ item.name }}
                                </div>
                                <img :src="getServiceType(item.type)" class="service-type" alt="" />
                            </div>
                        </div>
                        <div class="business flex">
                            <div>主营：</div>
                            <span v-for="(cate, cateIndex) in item.second_cate_name" :key="cateIndex">
                                {{ cate }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pinglun target-element" ref="targetElement">
            <img class="pinglun_bj"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/service_index_pinglun_bj.png" alt="">

            <div class="pinglun-left">
                <div class="pinglun-title">
                    来自客户的信任
                </div>
                <div class="pinglun-count">
                    <div class="pinglun-count-item" style="margin-right: 160px;">
                        <img src="~/assets/images/service/index/pinglun_icon_1.png" alt="">
                        <countTo ref="countTo1" :startVal="100000" :endVal="134898" :duration="3000" separator=""
                            :autoplay="false" class="countTo"></countTo>
                        <div class="name">用户数量</div>
                    </div>
                    <div class="pinglun-count-item" style="margin-right: 160px;">
                        <img src="~/assets/images/service/index/caidan2.png" alt="">
                        <countTo ref="countTo2" :startVal="1000" :endVal="1106" :duration="3000" separator=""
                            :autoplay="false" class="countTo"></countTo>
                        <div class="name">服务商数量</div>
                    </div>
                    <div class="pinglun-count-item">
                        <img src="~/assets/images/service/index/pinglun_icon_3.png" alt="">
                        <countTo ref="countTo3" :startVal="1000" :endVal="9233" :duration="3000" separator=""
                            :autoplay="false" class="countTo"></countTo>
                        <div class="name">已完成服务数量</div>
                    </div>
                </div>
            </div>

            <div class="pinglun-line"></div>

            <AutoScrollRectangles></AutoScrollRectangles>
        </div>


        <!-- 热门需求 -->
        <div class="page-title">
            <img src="~/assets/images/service/index/index_title_icon4.png" alt="" />
            <div class="title-text">平台优势</div>
        </div>
        <div class="ptys flex-center-1 flex-sb">
            <div class="card" v-for="(item, index) in cardList" :key="index">
                <img v-if="index == 0" src="~/assets/images/service/index/ptys_icon_1.png" class="icon" alt="">
                <img v-if="index == 1" src="~/assets/images/service/index/ptys_icon_2.png" class="icon" alt="">
                <img v-if="index == 2" src="~/assets/images/service/index/ptys_icon_3.png" class="icon" alt="">
                <img v-if="index == 3" src="~/assets/images/service/index/ptys_icon_4.png" class="icon" alt="">
                <div class="title">{{ item.name }}</div>
                <div class="fz-18 bold title2">{{ item.title }}</div>
                <img src="~/assets/images/service/index/ptys_line.png" class="line" alt="">
                <div class="info">
                    {{ item.info }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

import { getUserIndex } from "@/assets/api/service";
import { getanalysedata } from "@/assets/api/indexApi";

import { goTopSmooth } from "@/assets/utils/utils";


import serviceType5 from "@/assets/images/service/index/serviceType1.png";
import serviceType6 from "@/assets/images/service/index/serviceType6.png";

import card1 from "@/assets/images/service/Introduce-img/card-1.png";
import card2 from "@/assets/images/service/Introduce-img/card-2.png";
import card3 from "@/assets/images/service/Introduce-img/card-3.png";
import card4 from "@/assets/images/service/Introduce-img/card-4.png";

import countTo from "vue-count-to";

import AutoScrollRectangles from "@/components/service/AutoScrollRectangles.vue"

export default {
    components: { countTo, AutoScrollRectangles },
    head() {
        return {
            title: "小竹企服-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            tabsActive: 0,


            hotDemandTabCur: "",
            swiperList: [
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
                {
                    name: "追*人",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-1.webp",
                    text: "从一个焦头烂额的会计小白，到成为老板的得力小助手。就因为我发现了这个网站。专业人员给了我很大的帮助。",
                },
                {
                    name: "学**调",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-2.webp",
                    text: "和朋友成立新公司，不太懂流程，无意中遇到了小竹财税。专业人员反馈及时，价格也合理，希望小竹财税能一直陪伴我们到公司步入正轨。",
                },
                {
                    name: "派*星",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-3.webp",
                    text: "这个平台真是太强大了，分门别类的服务项目，给不同需求的创业人提供帮助。是每一个创业人的最强劲的定心丸。",
                },
                {
                    name: "182****5136",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-4.jpg",
                    text: "专业的事情交给专业的人去做。最近公司有些业务上的变动，不知道如何操作，小竹财税给我们提供了最专业的服务，解决了大难题。",
                },
                {
                    name: "大*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-5.webp",
                    text: "这是一个很专业的平台。客服很耐心的解答了我的疑问，给我找到了一个最合适的服务商快速又完美的解决了我的问题。",
                },
                {
                    name: "七*七",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-6.webp",
                    text: "注册个公司，很快就搞好了，提供基本信息就不用管了，比我自己跑省心多了。",
                },
                {
                    name: "笛*塔",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-8.webp",
                    text: "小姐姐服务热情周到，体验感很好，期待下次合作！全程服务周到，不用操心，很专业，值得推荐！",
                },
                {
                    name: "巨贵**起",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-9.jpg",
                    text: "新公司想找个代账的，不知道哪家好，找到他们推荐了个，他们平台居然收了代账公司保证金，代账还是多了份保障的。",
                },
                {
                    name: "156****0263",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-10.jpg",
                    text: "整体来说还不错，服务很及时，报着试一试的心态，没想到很快就给回复了。业务范围挺广的，跨市的业务对接的也很快。",
                },
                {
                    name: "杨*",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-11.webp",
                    text: "公司分公司的会计辞职了，前任会计账做的一团糟，因为这个原因迟迟招不到新会计，专门找了小竹企服把多年的账务、税务给梳理整理一遍，招到了新会计，解决了燃眉之急！",
                },
                {
                    name: "Marjor",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-12.webp",
                    text: "抱着多问一家的心态，联系了小竹。没想到，发布需求没几分钟，就有工作人员联系我了，工作人员很专业，沟通很顺畅。可惜没评价，不然一定打五星！",
                },
                {
                    name: "无*夏",
                    avatar: "https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/pc/avatar/avatar-13.jpg",
                    text: "第一次用就种草了，沟通省心，办事快，以后不用到处比价联系了，就它了！",
                },
            ],
            cardList: [
                {
                    pic: card1,
                    name: '服务商准入精选化',
                    title: "精选服务商，品控有保证",
                    info: "为满足不同企业的需求，小竹企服对服务商进行了精细化准入筛查。综合考虑服务商的专业资质、业务规模、主业方向等，以企业利益最大化为基准，为企业精选最适合的服务商。",
                },
                {
                    pic: card2,
                    name: '服务流程标准化',
                    title: "流程标准，过程可视",
                    info: "为方便企业实时把控服务进度，小竹企服制定了标准化的服务流程体系。对各服务节点实行精益管理,实时监督服务商的执行进度，并为企业提供流程跟踪服务,让企业随时一览服务进度,尽享专业、可控的企业服务。",
                },
                {
                    pic: card3,
                    name: '服务价格透明化',
                    title: "标准收费，价格透明",
                    info: "提供服务前，服务商会向用户明确告知服务价格。平台将在服务过程中实施监督，发生差错或纠纷时，可依托保证金制度，充分保障用户的权益。",
                },
                {
                    pic: card4,
                    name: '服务评论真实化',
                    title: "评价真实，信用透明",
                    info: "用户可在交易完成后对服务商的服务进行多方位的评价，评价将会公开展示。平台将依据用 户反馈结果和服务过程中的客观表现，对服务商进行综合评判并加以排名。",
                },
            ],

            // 1：官方服务商 2：金牌服务商 3：银牌服务商 4：铜牌服务商 5：一般服务商
            getServiceType: function (type) {
                switch (type) {
                    case 1:
                        return serviceType5;
                    case 2:
                        return serviceType5;
                    case 3:
                        return serviceType5;
                    case 4:
                        return serviceType5;
                    case 5:
                        return serviceType5;
                    case 6:
                        return serviceType6;
                    default:
                        break;
                }
            },
            serviceHot: [],
            preferred: [],
            recommend: [],
            indexData: {},

            swiperShow: false,

            shopordercount: {
                status0: 0,
                status1: 0,
                status2: 0,
                status3: 0,
                status4: 0,
                status5: 0,
            },

            keyword: '',
            dataLoading: true,
        };
    },
    created() { },
    mounted() {
        this.init();
        this.swiperShow = true;
        this.$nextTick(() => {
            goTopSmooth();
        });
        getanalysedata({
            m_id: 9,
            type: 1,
            code: "PH1",
            describe: "小竹企服",
        });

        this.initObserver();
    },

    beforeDestroy() {
        if (this.observer) {
            this.observer.disconnect();
        }
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        ...mapState("service", {
            serviceHotSearch: (state) => state.serviceHotSearch,
        }),
        tabsActiveInputText: function () {
            switch (this.tabsActive) {
                case 0:
                    return '代理记账'
                case 1:
                    return '全国服务商'
                case 2:
                    return '优质服务'
            }
        },
    },
    watch: {},
    methods: {
        ...mapMutations("common", ["setmenuIndex", "setuserInfo", "set_payVipShow"]),
        ...mapMutations("service", ["set_serviceHotSearch"]),

        init() {
            this.getUserIndex();
        },

        initObserver() {
            const options = {
                root: null, // 相对于视口
                rootMargin: '0px',
                threshold: 0.65 // 当65%元素可见时触发
            };

            this.observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    console.log(entry)
                    if (entry.isIntersecting) {
                        console.log('元素已进入视口!');
                        // 可以在这里执行其他操作
                        this.$refs.countTo1.start()
                        this.$refs.countTo2.start()
                        this.$refs.countTo3.start()
                        this.observer.disconnect();
                    }
                });
            }, options);

            this.observer.observe(this.$refs.targetElement);
        },



        // 获取首页数据
        async getUserIndex() {
            const res = await getUserIndex({});
            if (res.code == 1) {
                this.indexData = res.data;
                // 获取热门需求
                this.recommend = res.data.recommend;
                // 热门服务商
                this.serviceHot = res.data.serviceinfo.hot;
                // 用户数据
                this.shopordercount = res.data.shopordercount;
                //优选大品牌
                let preferred = res.data.serviceinfo.preferred;
                // 热门搜索
                this.set_serviceHotSearch(
                    res.data.service_hot_search.split(",")
                );
                let iMax = Math.ceil(preferred.length / 3);
                for (let i = 0; i < iMax; i++) {
                    this.preferred[i] = [];
                    if (preferred.length > 2)
                        this.preferred[i].push(
                            preferred[0],
                            preferred[1],
                            preferred[2]
                        );
                    else this.preferred[i].push(...preferred);
                    preferred.splice(0, 3);
                }
                this.$nextTick(() => {
                    this.dataLoading = false
                })
            }
        },



        go(path) {
            this.$router.push({
                path: path,
            });
        },
        goLogin() {
            this.$router.push({
                path: "/login",
                query: {
                    url: window.location.pathname + window.location.search,
                    click: "1",
                },
            });
        },

        goSearch(keyword, cate) {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            if (this.tabsActive == 0) {
                this.$router.push({
                    path: "/service/demandlist",
                    query: {
                        keyword: this.keyword,
                    },
                });

            } else if (this.tabsActive == 1) {
                this.$router.push({
                    path: "/service/servicelist",
                    query: {
                        keyword: this.keyword,
                    },
                });

            } else if (this.tabsActive == 2) {
                this.$router.push({
                    path: "/service/servicesearch",
                    query: {
                        keyword: this.keyword,
                    },
                });
            }

        },
        goSearch2(keyword) {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$router.push({
                path: "/service/servicesearch",
                query: {
                    keyword: keyword,
                },
            });
        },

        goPostDemand() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$router.push({
                path: "/service/postdemand",
            });
        },

        go(path) {
            if (
                path == "/service/servicecenter/Index" &&
                !this.userInfo.service_info
            ) {
                this.$message({
                    message: "请先成为服务商",
                    type: "warning",
                });
                return;
            }
            this.$router.push({
                path: path,
            });
            console.log(this.$route);
        },
    },
};
</script>

<style lang="scss" scoped>
.service {
    background: #F0F7FF;
}



.banner {
    width: 100%;
    position: relative;
    padding: 50px calc(50% - 600px) 80px;

    .bj {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        display: block;
        object-fit: cover;
        z-index: 1;
    }

    * {
        position: relative;
        z-index: 10;
    }

    .banner-title {
        font-weight: 500;
        font-size: 48px;
        color: #000B1A;
        line-height: 70px;
    }

    .banner-tabs {
        display: flex;
        align-items: center;
        margin-top: 33px;

        .active {
            background: linear-gradient(45deg, #008EFF 0%, #40AAFF 100%);
            font-size: 18px !important;
            color: #FFFFFF !important;
        }

        .tab {
            width: 93px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-weight: 400;
            font-size: 16px;
            color: #000B1A;
            margin-right: 10px;
            border-radius: 50px;
            cursor: pointer;
            user-select: none;

            &:hover {
                opacity: 0.8;
            }
        }

        .tips {
            font-size: 15px;
            color: #000B1A;
            padding-left: 101px;
            cursor: pointer;

            img {
                position: relative;
                top: 2px;
                height: 22px;
                width: auto;
                padding-right: 5px;
            }

            &:hover {
                color: #008EFF;
            }
        }
    }

    .search {
        display: flex;
        align-items: center;
        margin-top: 13px;

        .search-1 {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            width: 624px;
            height: 60px;
            border-radius: 60px;
            border: 2px solid #008EFF;
            overflow: hidden;
            margin-right: 20px;

            .search-1-input {
                font-size: 18px;
            }

            &::v-deep .el-input__inner {
                border-style: none;

            }

            .search-1-right {
                width: 137px;
                height: 52px;
                background: linear-gradient(45deg, #008EFF 0%, #40AAFF 100%);
                border-radius: 50px;
                position: relative;
                right: 3px;
                font-size: 20px;
                color: #FFFFFF;

                &:hover {
                    opacity: 0.8;
                }

                &:active {
                    opacity: 0.9;
                }
            }
        }

        .fbxq-button {
            width: 139px;
            height: 54px;
            background: rgba(0, 142, 255, 0.1);
            border-radius: 50px;
            border: 2px solid #008EFF;
            font-size: 20px;
            color: #008EFF;

            &:hover {
                opacity: 0.8;
            }

            &:active {
                opacity: 0.9;
            }
        }
    }

    .everyone-search {
        margin-top: 25px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #000B1A;

        img {
            width: 12px;
            height: 14px;
            margin-left: 5px;
        }

        .many-tag {
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.ptbz {
    width: 1200px;
    position: relative;
    top: -10px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    height: 89px;
    box-sizing: border-box;

    .line {
        background-color: #EDEDED;
        height: 32px;
        width: 3px;
        border-radius: 22px;
    }

    .ptbz-icon {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 298px;
        height: 100%;

        img {
            width: 50px;
            height: 50px;
        }

        .ptbz-text {
            padding-left: 11px;
            font-weight: 500;
            font-size: 20px;
            color: #000B1A;
        }

        &:hover {
            background-color: #E5F3FF;
        }
    }
}

.service_index_ad_img {
    width: 1200px;
    margin: 19px auto 40px;
    position: relative;

    img {
        width: 100%;
        display: block;
    }


    .breathing-button {
        width: 180px;
        height: 48px;
        background: linear-gradient(45deg, #FA5151 0%, #FFC431 100%);
        border: 3px solid #FFFFFF;
        border-radius: 55px;

        font-size: 18px;
        color: #FFFFFF;
        line-height: 42px;
        text-align: center;
        position: absolute;
        top: 25px;
        right: 101px;
        cursor: pointer;
        /* 动画设置 */
        animation: breathing 2.1s ease-in-out infinite;

        /* 灰色阴影效果 */
        box-shadow:
            inset 0 2px 4px rgba(255, 255, 255, 0.3),
            inset 0 -2px 4px rgba(100, 100, 100, 0.2),
            0 4px 8px rgba(100, 100, 100, 0.3);
    }

    @keyframes breathing {
        0% {
            transform: scale(1);
            box-shadow:
                inset 0 2px 4px rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(100, 100, 100, 0.2),
                0 4px 8px rgba(100, 100, 100, 0.3);
        }

        50% {
            transform: scale(1.1);
            box-shadow:
                inset 0 2px 6px rgba(255, 255, 255, 0.4),
                inset 0 -2px 6px rgba(100, 100, 100, 0.3),
                0 6px 12px rgba(100, 100, 100, 0.5);
        }

        100% {
            transform: scale(1);
            box-shadow:
                inset 0 2px 4px rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(100, 100, 100, 0.2),
                0 4px 8px rgba(100, 100, 100, 0.3);
        }
    }
}

.page-title {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    img {
        width: auto;
        height: 36px;
        margin-right: 15px;
    }

    .title-text {
        font-weight: 500;
        font-size: 36px;
        color: #000B1A;
        width: 100%;
    }

    .more {
        font-weight: 500;
        font-size: 18px;
        color: #1B8DFF;
        cursor: pointer;
        white-space: nowrap;
    }
}

.plate-title {
    font-size: 28px;
    font-weight: 500;
    color: #333333;
    padding-top: 41px;
    text-align: left;
    width: 1200px;
    margin: 0 auto;
}

.plate-subtitle {
    width: 276px;
    height: 39px;
    background: #e3e5ed;
    border-radius: 39px;
    font-size: 14px;
    color: #333333;
    line-height: 39px;
    margin: 0 auto;
    text-align: center;
    margin-top: 18px;
}


.hot-demand-list {
    width: 1215px;
    margin: 0 auto 40px;
    flex-wrap: wrap;
    padding-top: 24px;
}

.hot-demand-item {
    margin: 0 7px;
    margin-bottom: 14px;
    width: 391px;
    height: 222px;
    background: #ffffff;
    border-radius: 4px;
    padding: 30px 25px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;

    .title-money {
        .title {
            cursor: pointer;
            font-weight: bold;
            color: #333333;

            span {
                padding-top: 10px;
                display: block;
                color: #999999;
            }
        }

        .money {
            font-weight: 500;
            color: #ff6900;
            white-space: nowrap;
        }
    }

    .hot-demand-item-info {
        line-height: 20px;
        color: #666666;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-top: 23px;
    }

    .hot-demand-item-open {
        position: absolute;
        bottom: 20px;
        width: 341px;
        align-items: center;

        .left {
            color: #666666;
            padding-top: 4px;
        }

        .buttons {
            width: 100px;
            height: 40px;
            background: #1B8DFF;
            border-radius: 5px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
            user-select: none;
            font-size: 14px;
            color: #FFFFFF;

            &:hover {
                opacity: 0.8;
            }



        }
    }

    &:hover {
        box-shadow: 0px 0px 12px 0px rgba(5, 50, 94, 0.12);

        .title {
            color: #1B8DFF;
        }
    }
}

.service-type {
    width: 96px !important;
    height: 24px !important;
    margin-top: 10px;
    border-radius: 0 !important;
    background-color: transparent !important;
}



.recommend {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;

    .big-recommend {
        width: 330px;
        height: 589px;
        background: linear-gradient(225deg, rgba(255, 255, 255, 0.15) 0%, rgba(27, 141, 255, 0.15) 100%);
        border-radius: 10px;
        position: relative;

        .big-recommend-img {
            width: 82px;
            height: 56px;
            position: absolute;
            top: 36px;
            right: 0;
        }

        .big-recommend-title {
            padding: 38px 0;
            text-align: center;
            font-weight: 600;
            font-size: 24px;
            color: #1C87F3;
        }
    }
}

.service-list {
    .service-item {
        background-color: #ffffff;
        width: 278px;
        height: 126px;
        margin: 0 auto;
        // background: #FFFFFF;
        background-color: transparent;
        background-size: 100% 100%;
        border-radius: 10px;
        padding: 18px 18px 20px 18px;
        margin-bottom: 22px;
        cursor: pointer;

        .service-item-business {
            padding-top: 17px;
            font-weight: 400;
            font-size: 14px;
            color: #000B1A;

            span {
                padding-right: 5px;
            }
        }

        &:hover {
            background: #FFFFFF;
            box-shadow: 0px 0px 12px 0px rgba(5, 50, 94, 0.12);
        }
    }
}

.service-item-info {
    img {
        width: 59px;
        height: 57px;
        border-radius: 57px;
        overflow: hidden;
        background-color: #ffffff;
    }

    >div {
        padding-left: 16px;
        padding-top: 1px;
        font-weight: 500;
        font-size: 16px;
        color: #000B1A;

        span {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            background: #4c4c4c;
            border-radius: 50px;
            padding: 0 10px;
            color: #ffffff;
            margin-top: 9px;
        }
    }
}

.hot-recommend {
    width: 855px;
    background: linear-gradient(225deg, rgba(255, 255, 255, 0.15) 0%, rgba(27, 141, 255, 0.15) 100%);
    border-radius: 4px;
    overflow: hidden;

    .title {
        height: 57px;
        border-bottom: 1px solid #ffffff;

        span {
            font-weight: 700;
            color: #000B1A;
            padding-left: 27px;

            img {
                height: 20px;
                width: 20px;
                margin-right: 8px;
            }
        }

        div {
            line-height: 58px;
            color: #1B8DFF;
            padding-right: 27px;
        }
    }
}

.hot-service-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    height: 531px;

    .hot-service-item {
        width: 283px;
        height: 176px;
        padding: 26px 0 0 26px;
        cursor: pointer;
        position: relative;
        margin: 0 1px;
        margin-bottom: 1px;
        transition: box-shadow 0.35s;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;

        &:nth-child(3n) {
            border-right: none;
        }

        &:nth-child(7),
        &:nth-child(8),
        &:nth-child(9) {
            border-bottom: none !important;
        }

        &:hover {
            box-shadow: 0px 0px 12px 0px rgba(5, 50, 94, 0.12);
            vertical-align: top;
            background: #FFFFFF;
            z-index: 1;
            transform: scale(1.02);

            .business {
                color: #1B8DFF;
            }
        }

        .business {
            margin-top: 31px;
            color: #000B1A;

            div {
                line-height: 27px;
                font-weight: 400;
                font-size: 14px;
            }

            span {
                line-height: 27px;
                font-weight: 400;
                font-size: 14px;
                margin-right: 8px;
                display: block;
            }
        }
    }
}

.pinglun {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 0 calc(50% - 600px);
    height: 526px;
    margin-top: 55px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .pinglun_bj {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    * {
        position: relative;
        z-index: 10;
    }

    .pinglun-left {

        .pinglun-title {
            font-weight: 600;
            font-size: 36px;
            color: #000B1A;
        }

        .pinglun-count {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 71px;
        }

        .pinglun-count-item {
            text-align: center;

            img {
                width: 42px;
                height: 42px;
            }

            .countTo {
                font-weight: 700;
                font-size: 36px;
                color: #1B8DFF;
                display: block;
                margin: 4px 0 3px;
            }

            .name {
                font-weight: 500;
                font-size: 20px;
                color: #000B1A;
            }
        }
    }

    .pinglun-line {
        width: 5px;
        height: 100%;
        background-color: #ffffff;
    }
}

.no-user {
    text-align: center;
    padding-top: 81px;

    img {
        width: 70px;
        height: 70px;
        border-radius: 70px;
        margin-bottom: 20px;
    }
}

.ptys {
    width: 1200px;
    margin: 0 auto;
    // margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 40px;

    .card {
        margin-top: 35px;
        padding: 24px 50px 0 143px;
        width: 585px;
        height: 240px;
        background: #ffffff;
        border-radius: 10px;
        position: relative;

        &:hover {
            box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);

        }

        .icon {
            width: 48px;
            height: 48px;
            position: absolute;
            top: 97px;
            left: 44px;
        }

        // &:nth-child(-n + 2) {
        //     margin-top: 27px;
        // }

        // &:not(:nth-child(2n)) {
        //     margin-right: 36px;
        // }

        .title {
            font-weight: 600;
            font-size: 21px;
            color: #1B8DFF;
            margin-bottom: 4px;
            line-height: 30px;
        }

        .title2 {
            color: #000B1A;
            line-height: 26px;
        }

        .line {
            height: 4px;
            width: auto;
            margin: 10px 0 2px;
        }

        .info {
            font-size: 16px;
            color: #000B1A;
            line-height: 27px;
        }
    }

}
</style>